<template>
  <div class="wrapper">
    <header>
      <p>评价界面</p>
    </header>

    <!-- 订单信息部分 -->
    <div class="order">
      <h3>订单信息：</h3>
      <div class="order-info">
        <p>
          {{ orders.business.businessName }}
          <i class="fa fa-caret-down"></i>
        </p>
        <p>&#165;{{ orders.orderTotal }}</p>
      </div>

      <!-- 订单明细部分 -->
      <ul class="order-detailet">
        <li v-for="item in orders.list" :key="item.food.foodId"> <!-- 假设每个 food 有唯一的 foodId -->
          <p>{{ item.food.foodName }} x {{ item.quantity }}</p>
          <p>&#165;{{ (item.food.foodPrice * item.quantity)}}</p>
        </li>
        <li>
          <p>配送费</p>
          <p>&#165;{{ orders.business.deliveryPrice }}</p>
        </li>
      </ul>

    </div>

    <!-- 评分部分 -->
    <div class="window">
      <h2 class="title">你的评价</h2>
      <br>
      <div class="box">
        <div class="stars">
          <a class="fa fa-star b5" @mouseover="highlightStars(1)"></a>
          <a class="fa fa-star b4" @mouseover="highlightStars(2)"></a>
          <a class="fa fa-star b3" @mouseover="highlightStars(3)"></a>
          <a class="fa fa-star b2" @mouseover="highlightStars(4)"></a>
          <a class="fa fa-star b1" @mouseover="highlightStars(5)"></a>
        </div>
        <p class="score">{{ score }}</p>
      </div>
      <div class="button">
        <button class="confirm" @click="confirmMark">确认</button>

        <button class="cancel" @click="toOrderList">取消</button>
      </div>
    </div>

    <Footer></Footer>
  </div>

</template>


<script>
import Footer from "@/components/Footer.vue";

export default {
  /* eslint-disable */
  name: 'Star',
  components: { Footer },
  data() {
    return {
      orderId: this.$route.query.orderId,
      orders: {},
      user: {},
      score: 0,
      mark: {
        orderId: '',
        addMark: 0
      }

    }
  },
  created() {
    this.user = this.$getSessionStorage('user');

    this.$axios.post('OrdersController/getOrdersById', this.$qs.stringify({
      orderId: this.orderId
    })).then(response => {
      this.orders = response.data;
    }).catch(error => {
      console.error(error);
    });

  },
  methods: {

    highlightStars(num) {
      const stars = document.querySelectorAll('.box a');
      for (let i = 0; i < num; i++) {
        stars[i].classList.add('active');
      }
      for (let i = num; i < stars.length; i++) {
        stars[i].classList.remove('active');
      }
      this.score = num;
    },
    confirmMark() {
      if (this.score == 0) {
        alert('评分不能为0！');
        return;
      }
      this.mark.orderId = this.orderId;
      this.mark.addMark = this.score;
      this.$axios.post('OrdersController/updateAddMark',
        this.$qs.stringify(
          this.mark
        )).then(response => {
          if (response.data > 0) {
            this.$router.push({
              path: '/orderList'
            });
          } else {
            alert('评分失败！');
          }
        }).catch(error => {
          console.error(error);
        });
    },

    toOrderList() {
      this.$router.push({
        path: '/orderList'
      });
    }
  }

}
</script>

<style scoped>
.wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.wrapper header {
  width: 100%;
  height: 12vw;
  background: linear-gradient(royalblue, #4d6dec, #2a34a6);
  color: #fff;
  font-size: 4.8vw;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

/********** 订单信息部分 ***********/
.wrapper .order {
  margin-bottom: 30px;
}

.wrapper .order h3 {
  margin-top: 12vw;
  box-sizing: border-box;
  padding: 4vw 4vw 0;

  font-size: 4vw;
  font-weight: 300;
  color: #999;
}

.wrapper .order .order-info {
  box-sizing: border-box;
  padding: 4vw;
  font-size: 4vw;
  color: #666;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wrapper .order .order-info p:last-child {
  color: orangered;
}

/********** 订单明细部分 **********/
.wrapper .order .order-detailet {
  width: 100%;
}

.wrapper .order .order-detailet li {
  width: 100%;
  box-sizing: border-box;
  padding: 1vw 4vw;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wrapper .order .order-detailet li p {
  font-size: 3vw;
  color: #666;
}

.wrapper .window {
  width: 70%;
  height: 20vh;
  border-radius: 10px;
  border: solid 1px #ffffff;
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.2);
  margin-left: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.wrapper .window .title {
  color: royalblue;
  text-align: center;

}

.wrapper .window .box {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-left: 60px;
  margin-right: 60px;
}

.wrapper .window .box p {
  font-size: 20px;
  color: royalblue;
  font-weight: bolder;
}

.wrapper .window .box a {
  font-size: 30px;
  color: #ABB2B9;
  transition: 0.3s all;
}

.wrapper .window .box a.active {
  color: #f1c40f;
}

.wrapper .window .button {
  display: flex;
  margin-top: 20px;
  justify-content: space-around;
  margin-left: 40px;
  margin-right: 40px;


}

.wrapper .window .button .confirm {
  background-color: royalblue;
  border: solid 1px #DDD;
  font-size: 15px;
  color: #ffffff;
  border-radius: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 3px;
  padding-bottom: 5px;
}

.wrapper .window .button .cancel {
  background-color: royalblue;
  border: solid 1px #DDD;
  font-size: 15px;
  color: #ffffff;
  border-radius: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 3px;
  padding-bottom: 5px;
}
</style>